<%@ page  language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>影院管理页面</title>
    <%@ include file="../comm.jsp" %>
    <script src="${pageContext.request.contextPath}/js/tooljs/cinema.js"></script>
    <style>
        .layui-form{
            margin-left: 20px;
        }
        #add {
            margin-left: 50px;
        }
        .list{
            margin-top: 40px;
        }
        .layui-table{
            width: 95%;
            margin: 0 auto;
        }
        #demo7{
            margin-top: 10px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<h2 align="center" style="margin-bottom:20px;">影院管理</h2>
<%--操作栏--%>
    <section>
    <%--查询操作栏--%>
        <form onsubmit="" class="layui-form" id="selectForm">
        <%--地区下拉列表--%>
        <div class="layui-form-item">
            <label class="layui-form-label">选择位置：</label>
            <div class="layui-input-inline">
                <select name="diqu" id="diqu" lay-filter="diqu">
                    <option value="">请选择市</option>
                    <c:forEach var="area" items="${requestScope.cinemaPageVO.areaList}">
                        <option value="${area.aid}" >${area.aname}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-input-inline" >
                <select name="diqu2" id="diqu2" lay-filter="diqu2">
                    <option value="">请选择区</option>
                </select>
            </div>
        <%--名称查询框--%>
            <div class="layui-inline">
                <label class="layui-form-label">影院名称：</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" id="cname2"  class="layui-input" value="${requestScope.cinemaPageVO.params.cname}">
                </div>
            </div>
        <%-- 查询操作--%>
            <button onclick="toFind(1,${requestScope.cinemaPageVO.rows})" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                <i class="layui-icon">&#xe615;</i>    查询
            </button>
            <button onclick="toClearFind(1,${requestScope.cinemaPageVO.rows})" type="button" class="layui-btn layui-btn-primary layui-border-blue">
                <i class="layui-icon">&#xe9aa;</i>    清空查询
            </button>
        </div>
        </form>
        <%--添加操作栏--%>
        <a href="javascript:toAdd();" class="layui-btn layui-btn-primary layui-border-green" id="add">
            <i class="layui-icon">&#xe61f;</i>    新建
        </a>
    </section>
<%--影院列表--%>
    <section class="list">
        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
                <col width="150">
                <col width="150">
                <col width="200">
            </colgroup>
            <thead>
            <tr>
                <th>影院名称</th>
                <th>地区位置</th>
                <th>影院地址</th>
                <th>影院联系电话</th>
                <th>影院账号</th>
                <th>操作栏</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="cinema" items="${requestScope.cinemaPageVO.cinemaList}">
                <tr>
                    <td>${cinema.cname}</td>
                    <td>${cinema.area1}--${cinema.area2}</td>
                    <td>${cinema.caddress}</td>
                    <td>${cinema.cphonenum}</td>
                    <td>${cinema.caccount}</td>
                    <td>
                        <button onclick="toSet(${cinema.cid})" class="layui-btn layui-btn-primary layui-border-orange  layui-btn-sm">
                        <i class="layui-icon">&#xe642;</i>    编辑
                        </button>
                        <button onclick="toDelete(${cinema.cid})" class="layui-btn layui-btn-primary layui-border-red  layui-btn-sm">
                            <i class="layui-icon">&#xe640;</i>    删除
                        </button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <div id="demo7"></div>
    </section>
<%@ include file="cinemaAdd.jsp"%>
<%@ include file="cinemaSet.jsp"%>
<script>
    var $ ;
    layui.use(['jquery','laypage','form'], function() {
        $ = layui.$ ;
        var laypage = layui.laypage
            ,form = layui.form;
        laypage.render({
            elem: 'demo7'
            , count: ${requestScope.cinemaPageVO.total}
            , limit:${requestScope.cinemaPageVO.rows}
            , curr:${requestScope.cinemaPageVO.pageNo}
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , limits:[4,10,16,25]
            , jump: function (obj,first) {
                if(first){
                    return;
                }
                toFind(obj.curr,obj.limit);
            }
        });
        //作用在每次查询后，将条件再次渲染到页面
        $(function (){
            $("#diqu").val(${empty requestScope.cinemaPageVO.params.aid1?"":requestScope.cinemaPageVO.params.aid1});
            $.ajax({
                url:"area2",
                data:{
                    pid:${empty requestScope.cinemaPageVO.params.aid1?-1:requestScope.cinemaPageVO.params.aid1}
                },
                dataType:"json",
                success:function(resultData){
                    if(resultData.code == 0){
                        //清空赋值
                        $("#diqu2").empty();
                        $("#diqu2").append(new Option("请选择地区", ""));
                        $.each(resultData.data, function(index, item) {
                            //赋值
                            $('#diqu2')
                                .append(new Option(item.aname, item.aid));
                        });
                        $('#diqu2').val(${requestScope.cinemaPageVO.params.aid2})
                    }else{
                        $("#diqu2").append(new Option("暂无数据", ""));
                    }
                    layui.form.render("select");
                }
            })
        })
        //添加影院时的二级下拉列表渲染的事件
        form.on('select(area1)', function (data) {
           var value = data.value;
            $.ajax({
                url:"area2",
                data:{pid:value},
                dataType:"json",
                success:function(resultData){
                    if(resultData.code == 0){
                        //清空赋值
                        $("#area2").empty();
                        $("#area2").append(new Option("请选择地区", ""));
                        $.each(resultData.data, function(index, item) {
                            //赋值
                            $('#area2')
                                .append(new Option(item.aname, item.aid));
                        });
                    }else{
                        $("#area2").append(new Option("暂无数据", ""));
                    }
                    layui.form.render("select");
                }
            })
            layui.form.render("select");
        });
        //查询的地区二级下拉列表的事件
        form.on('select(diqu)', function (data) {
            var value = data.value;
            $.ajax({
                url:"area2",
                data:{pid:value},
                dataType:"json",
                success:function(resultData){
                    if(resultData.code == 0){
                        //清空赋值
                        $("#diqu2").empty();
                        $("#diqu2").append(new Option("请选择地区", ""));
                        $.each(resultData.data, function(index, item) {
                            //赋值
                            $('#diqu2')
                                .append(new Option(item.aname, item.aid));
                        });
                    }else{
                        $("#diqu2").append(new Option("暂无数据", ""));
                    }
                    layui.form.render("select");
                }
            })
            layui.form.render("select");
        });
        //编辑时的二级地址事件
        form.on('select(setarea1)', function (data) {
            var value = data.value;
            $.ajax({
                url:"area2",
                data:{pid:value},
                dataType:"json",
                success:function(resultData){
                    if(resultData.code == 0){
                        //清空赋值
                        $("#setarea2").empty();
                        $("#setarea2").append(new Option("请选择地区", ""));
                        $.each(resultData.data, function(index, item) {
                            //赋值
                            $('#setarea2')
                                .append(new Option(item.aname, item.aid));
                        });
                    }else{
                        $("#setarea2").append(new Option("暂无数据", ""));
                    }
                    layui.form.render("select");
                }
            })
            layui.form.render("select");
        });
    });

</script>
</body>
</html>